Components › Forms & input › Date & time › Calendar

Calendar

canon

Month grid with navigation and presets, single or range selection.

Calendar PAGE chrome (acrm !3942, AD 27 Sep 2026): month label = SectionTopBarChip opening the jump popover (the page title stays „Kalendář“); year ←→ = IconButton sm; the 12-month grid reuses the day cell `.dp-day` with `.sel` + aria-current — one „selected“ look for date picking, no button variant as state. DELIBERATE EXCEPTION: the nav trio ‹ ● › (previous · today · next) keeps its own look per the owner’s ACRM-91/97/103 (arrows without a hover surface that only darken, „Dnes“ a small grey circle-dot) — real <button>s with aria-label and a focus ring, tokens only; do not convert to IconButton. The day-panel ear (.cal-ear) is a second exception (surface chrome, tokens only).

Used in 7 files · 6 areas · 7× — components/FilterBar, components/callwrapup, components/mail, components/projects, components/tasks, components/timeline

@acrm/ui <Calendar>.dp-pop .dp-month .dp-grid .dp-day +2SourceStoryLegacy card dates.html
ExamplesCodeUsageAccessibilityChangelog

The month surface of every picker. React <Calendar> (packages/ui/src/components/Calendar.tsx) emits .dp-pop with presets, navigation .dp-nav, weekday row .dp-wd and the 6×7 grid .dp-grid of .dp-day cells. It is a plain surface without a popover, so it works inside Picker panel, inside a filter chip menu, in the rail and in the mobile sheet.

When to use

  • The body of Date field (mode="single", singleDatePresets), Date range (mode="range", months={2}, pastRangePresets) and the task due panel.
  • A range picker embedded in a 264px menu: mode="range" with months={1} — the .range frame is bound to the number of rendered months, not to the mode.
  • Any place a date is chosen by pointing rather than typing.

When not to use

  • As the only entry path in a form — pair it with a typed field (Date field).
  • A month overview of events — that is the Kalendář screen, not this picker.
  • Selecting a time — Time field list.

Anatomy

  • .dp-pop: 264px, column, gap --sp-2; .dp-pop.range 540px (two months, gap --sp-6).
  • Optional head slot (range: .dp-entry.pair), then .dp-presets pills (26px, --radius-pill, --surface-75; .on = accent frame, --accent-ink, transparent) and .dp-rule.
  • .dp-nav: height --control-h, arrows 26×26 quiet, titles .mt in --h3 ("srpen 2026", formatMonthYear).
  • .dp-month 252px: .dp-wd overline weekday labels (locale first weekday), .dp-grid 7×36px columns, cells .dp-day 36×30, 500 13px.
  • Cell states: .we weekend --fg-secondary; .out other month --fg-muted; .today accent digit 600, no fill; .sel full --accent tile, white digit (selection carries the fill, AD 23 Jul 2026); .in between days --accent-tint / --accent-ink as a continuous band; .preview half-tint while the second end is hovered; :disabled (min/max) --ink-300.
  • Open range (one end only): the band runs off the grid on the open side and only the closed end gets the .sel stop (AD 29 Jul 2026).
  • Props: months 1 | 2 (mobile always 1), min, max, presets, today, locale, autoFocus, onRequestClose; onChange(value, commit).

Best practices

Do
  • Use the exported presets (singleDatePresets, pastRangePresets) and add your own only as { label, get } in the same row.
  • Pass today in stories and tests so "today" and presets are stable.
  • Keep two months only in the 540px panel; in menus and on mobile show one.
Don’t
  • Filling "today" with accent — today is the accent digit, the fill belongs to the selection.
  • Adding month/year selects to the nav — PageUp/PageDown and Shift for a year are the way to jump.
  • Gaps or rounded corners between in-range cells; the band is continuous with radius only on row ends.
  • A second calendar implementation (react-datepicker, <input type="date">) anywhere.

Content

  • Month title by formatMonthYear ("srpen 2026" — year always in this long form).
  • Cell aria-label by formatDate (year only when needed); weekday labels from Intl short names.
  • Nav labels "Předchozí měsíc" / "Další měsíc"; presets sentence case ("Příští týden", "Posledních 7 dní").
  • date-field, date-range, date-time-range — the fields that open it.
  • picker-panel — the floating container.
  • filter-chip — chip menu that embeds a one-month range calendar.

Source: docs/date-time/calendar.usage.md · GitLab